<template>
	<view class="page">
		<view class="info-wrap">
			<view class="top-dack"></view>

			<view class="info tp-w690">

				<view class="chartered_item">
					<image class="img" :src="carInfo.img" mode="aspectFill"></image>
					<view class="chartered_info">
						<view class="name">{{carInfo.name || ''}}</view>
						<view class="detail">
							<view class="price" v-if="packageInfo.id">￥ <text style="font-weight: bold;font-size: 36rpx;">{{packageInfo.price || ''}}</text>/{{packageInfo.day || ''}}天</view>
							<view class="price" v-else>￥ <text style="font-weight: bold;font-size: 36rpx;">{{carInfo.price || ''}}</text>/1天</view>
							<view class="passenger_num">{{carInfo.attributes || ''}}</view>
						</view>
					</view>
				</view>

				<view class="info_top-wrap">
					<text class="type">租车</text>
					<view class="date-wrap">
						<text class="time_s"> {{rentStartDate || ''}}</text>

						<picker :value="index" :range="dayList" @change="bindPickerChange" v-if="!packageInfo.id">
							<div class="duration">{{Number(index)+1}}天</div>
						</picker>
						<div class="duration" v-else>{{packageInfo.day || 1}}天</div>
						<text class="time_e"> {{rentEndDate || ''}}</text>
					</view>
				</view>

				<view class="info_content-wrap">
					<view class="address-wrap">
						<view class="from">
							<text class="type">取</text>
							<text class="txt ellispsis1">{{rentInfo.choosedStation.from.name || ''}}</text>
						</view>
						<view class="to">
							<text class="type">还</text>
							<text class="txt ellispsis1">{{(rentInfo && rentInfo.choosedStation  && rentInfo.choosedStation.to && rentInfo.choosedStation.to.name)|| rentInfo.choosedStation.from.name}}</text>
						</view>
					</view>
					<uni-icons type="arrowright" size="30" color="#999" @click="handleBack"></uni-icons>
				</view>
			</view>
		</view>

		<view class="content-wrap tp-w690 ">
			<view class="rider_info-wrap">
				<!-- 当前驾驶人列表S -->
				<view class="rider_list" v-if="riderPersionList.length">
					<view class="rider_item" v-for="(it_r,in_r) in riderPersionList" :key="in_r">
						<view class="l-wrap">
							<uni-icons type="trash" size="22" color="#ccc" @click="handleDelRider(it_r)"></uni-icons>
							<text class="name ellispsis1">{{it_r.name}}</text>
							<!-- <text class="type">{{it_r.type}}</text> -->
							<text class="ID">{{it_r.phone}}</text>
						</view>
						<uni-icons @click="handleGoCommonAddRider(it_r)" type="arrowright" size="22" color="#ccc"></uni-icons>
					</view>
				</view>
				<!-- 当前驾驶人列表E -->

				<view class="common-btn" @click="handleGoCarpoolAddRider">
					<view class="common-btn-con">
						<uni-icons type="plus" size="20" color="#fff"></uni-icons>
						<text class="txt">添加驾驶员</text>
					</view>
				</view>
			</view>
		</view>



		<view class="common-wrap tp-w690" v-if="textareaShow">
			<view class="input-wrap remark">
				<view class="tit">备注：</view>
				<textarea class="textarea" v-model="remark" placeholder="请输入备注" />
				</view>
		</view>
		
		<view class="common-wrap tp-w690">
			<view
				class="input-wrap" 
				v-for="(it_i, in_i) in insuranceList"
				:key="in_i"
				 @click="handleChooseInsurance(it_i, in_i)"
			>
				<view class="l-wrap">
					<view  v-if="!it_i.choosed" class="icon"><image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image></view>
					<view  v-else class="icon"><image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image></view>
					<view>购买保险<text class="terms" @click.stop="handleGoInsuranceDetail(it_i)">《{{it_i.name}}》</text></view>
				</view>
				<view class="price">￥{{it_i.price}}</view>
			</view>
			
			<view class="input-wrap " @click="handleChooseDriver">
				<view class="l-wrap">
					<view v-if="!needDriver" class="icon"><image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image></view>
					<view v-else class="icon"><image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image></view>
					<view>是否需要司机</view>
				</view>
				<view class="price" style="color: #FF4A37">￥{{carInfo.driverPrice}}</view>
			</view>
		</view>
		<view class="common-wrap tp-w690" v-if="needDriver">
			<view class="input-wrap">
				<view class="type">意向司机</view>
				<view class="input" @click="handleGoDriverList">
					<input type="text" disabled :value="curDriverObj && curDriverObj.name" placeholder="请选择" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="tp-pd30">
			<view class="level_align tp-br12 tp-h98 tp-bgf tp-ptb0lr30  tp-fz26" @click="isFp = isFp == 1 ? 0 : 1">
				<image v-if="isFp == 1"  class="tp-img32 tp-mr20" src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
				<image v-else class="tp-img32 tp-mr20" src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
				<view>是否开具发票</view>
			</view>
		</view>
		
		<view class="common-wrap tp-w690">
			<view class="input-wrap">
				<view class="type">押金 
					<uni-icons @click="goToFWb(6,'押金规则')" style="margin-left: 20rpx;" type="help" size="20" color="#FFAF3C"></uni-icons>
				</view>
				<view class="price">￥{{cashPledge}}</view>
			</view>
			<view class="input-wrap" @click="handleGoBusCouponList">
				<view class="type">优惠券</view>
				<view class="input">
					<input disabled type="text" :value="choosedBusCoupon.id ? (choosedBusCoupon.useScene ==1 ? `满${choosedBusCoupon.fullAmount}减${choosedBusCoupon.amount}` : `减${choosedBusCoupon.amount}`) : ''" :placeholder="integralPlacholde"/>
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<!-- <view class="input-wrap">
				<view class="type">积分抵扣</view>
				<view class="input">
					<input type="number" :disabled="integral==0" v-model="usedIntegral" :placeholder="`最多可用${integral}积分`" @input="handleWatchUseIntegral"/>
				</view>
			</view> -->
		</view>
		
		<view class="buy_description tp-w690" @click="handleChooseBuyDescription">
			<view  v-if="!buyDescriptionStatus" class="icon"><image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image></view>
			<view  v-else class="icon"><image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image></view>
			<view>
				请您仔细阅读
				<text  class="terms">《租车须知》</text>
				<!-- 、@click.stop="handleGoInsuranceDetail(it_n, 2)" -->
			</view>
		</view>
		
		<view class="submit-btn">
			<view class="price-wrap">
				<text>总价：</text>
				<text class="price">￥{{totalMoney}}</text>
			</view>
			<view class="r-wrap">
				<!-- <view class="detail-btn" @click="handleShowPriceDetail">
					<text>明细</text>
					<uni-icons class="arrow-icon" type="arrowdown" size="20" color="#999"></uni-icons>
				</view> -->
				<view class="btn" @click="handleSubmitOrder">提交订单</view>
			</view>
		</view>
		
		<!-- <view class="popup-wrap">
			<uni-popup ref="priceDetail" type="bottom">
				<view class="popop_content">
					<view class="ul">
						<view class="li">
							<text>车票</text>
							<view class="r-wrap">
								<text class="price">￥56</text>
								<text class="num">X2人</text>
							</view>
						</view>
						<view class="li">
							<text>保险</text>
							<view class="r-wrap">
								<text class="price">￥56</text>
								<text class="num">X2人</text>
							</view>
						</view>
					</view>
				</view>
				<view class="submit-btn">
					<view class="price-wrap">
						<text>总价：</text>
						<text class="price">￥28</text>
					</view>
					<view class="r-wrap">
						<view class="detail-btn" @click="handleShowPriceDetail('close')">
							<text>明细</text>
							<uni-icons class="arrow-icon" type="arrowup" size="20" color="#999"></uni-icons>
						</view>
						<view class="btn" @click="handleSubmitOrder">提交订单</view>
					</view>
				</view>
			</uni-popup>
		</view> -->
		
		
		
		
		<CommonPay ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @cancle="noPay" @closeK="noPay"  @payMoney="payMoney" @wechatPaySuccess="wechatPaySuccess"></CommonPay>
		
		<Notice ref="notice" :noticeInfo="noticeInfo" :isbtn="buyDescriptionStatus" @NoticeOk="buyDescriptionStatus = true" @close="textareaShow = true"></Notice>
	</view>
</template>

<script>
	import CommonPay from '@/components/common/common-pay.vue'
	import Notice from '@/components/common/notice.vue'
	import utils from '../../components/tp-calendar/util.js'
	import Utils from '../../utils/utils.js'
	export default {
		components: {
			CommonPay,
			Notice
		},
		data() {
			return {
				orderNo: '', // 订单号
				curDriverObj: {}, // 当前所选意向司机
				buyDescriptionStatus: false, // 购买须知
				riderPersionList: [],
				returnStatus: true, // 是否选择返程
				carInfo: {}, // 租车的车辆信息
				packageInfo: {}, // 选择的套餐信息
				dayList: [], // 可选择的日常
				showDayPicker: true, // 展示日常选择器
				DaysPickVal: [],
				index: 0,
				couponList: [], // 优惠券列表
				// choosedBusCoupon: {}, // 选择的优惠券
				driverList: [], // 驾驶员列表
				insuranceList: [], // 保险列表
				noticeList: [], // 须知列表
				noticeInfo: {}, // 须知信息
				integral: 0, // 个人总积分
				usedIntegral: '', // 使用的积分
				exchangeRate: '', // 积分兑换汇率
				cashPledge: 0, // 押金
				needDriver: false, // 是否需要司机
				isFp: 1, // 	是否需要发票 0.是 1.否
				updata: {
					useCarTime: '',
					returnTime: ''
				},
				remark: '', // 备注
				textareaShow: true, // 文本框显示隐藏
			};
		},
		onLoad(opt) {
			this.initList()
			if (opt.packageInfo !== 'undefined') {
				this.packageInfo = opt.packageInfo && JSON.parse(opt.packageInfo)
			}
			this.index = this.packageInfo.day-1 || 0
			this.carInfo = opt.carInfo && JSON.parse(opt.carInfo)
			this.initDayList()
			this.getInsuranceList()
		},
		onShow() {
			this.getCurDriverObj()
			this.getDriverList()
			this.getRiderList()
		},
		computed: {
			integralPlacholde() { // 积分选择提示
				return this.couponList.length===0 ? '暂无优惠券可用' : '点我选择优惠券'
			},
			rentInfo() {
				return this.$store.getters.getRentInfo
			},
			rentStartDate() {
				const {year, month, day} = this.rentInfo.dateObj
				const h = this.rentInfo.dateObj.hour.value
				const m = this.rentInfo.dateObj.minute.value
				this.updata.useCarTime = `${year}-${month}-${day} ${h}:${m}:00`
				return `${month}月${day}日 ${h}:${m}`
			},
			rentEndDate() {
				let { year, month, day} = this.rentInfo.dateObj
				const dd = `${year}-${month}-${day}`
				const delayDay = (Number(this.index)+1) * 24
				const newD = utils.getBeforeDate(dd, delayDay)
				const y = newD.split('-')[0]
				const new_m = newD.split('-')[1]
				const new_d = newD.split('-')[2]
				const new_h = this.rentInfo.dateObj.hour.value
				const new_min = this.rentInfo.dateObj.minute.value
				this.updata.returnTime = `${y}-${new_m}-${new_d} ${new_h}:${new_min}:00`
				return `${new_m}月${new_d}日 ${new_h}:${new_min}`
			},
			// 优惠前的价格
			originalPrice(){
				let usedIntegral = Number(this.usedIntegral) || 0
				let exchangeRate = Number(this.exchangeRate) || 1
				let money = - usedIntegral * exchangeRate + Number(this.cashPledge) * 100
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * 100
					}
				})
				
				if (this.packageInfo.id) { // 选择了套餐
					money = money + this.packageInfo.price * 100
				} else { // 没有选择套餐
					money = money + this.carInfo.price * 100 * (Number(this.index)+1)
				}
				
				if (this.needDriver) { // 判断是否需要司机
					let useDay = Number(this.packageInfo.day) || 1
					money += Number(this.carInfo.driverPrice) * 100 * useDay
				}
				money = Math.round(money)
				return money / 100 >= 0 ? (money/100).toFixed(2) : 0
			},
			totalMoney() {
				let usedIntegral = Number(this.usedIntegral) || 0
				let exchangeRate = Number(this.exchangeRate) || 1
				let money = - usedIntegral * exchangeRate + Number(this.cashPledge) * 100
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * 100
					}
				})
				
				if (this.packageInfo.id) { // 选择了套餐
					money = money + this.packageInfo.price * 100
				} else { // 没有选择套餐
					money = money + this.carInfo.price * 100 * (Number(this.index)+1)
				}
				
				
				
				if (this.needDriver) { // 判断是否需要司机
					let useDay = Number(this.packageInfo.day) || 1
					money += Number(this.carInfo.driverPrice) * 100 * useDay
				}
				
				let { fullAmount, amount } = this.choosedBusCoupon
				if (this.choosedBusCoupon.useScene == 1) { // 判断是否属于满减
					if (money >= Number(fullAmount)*100) {
						money = money - Number(amount)*100
					}
				} else if (this.choosedBusCoupon.useScene == 0) {
					money = money - Number(amount)*100
				}
				
				
				money = Math.round(money)
				return money / 100 >= 0 ? (money/100).toFixed(2) : 0
			},
			orderInfo() {
				let o = {
					orderNo: this.orderNo,
					type: 4
				}
				return o
			},
			choosedBusCoupon: { // // 获取选择的班车优惠券
				get(){
					return this.$store.getters.getChoosedBusCoupon
				},
				set(){}
				
			}
		},
		watch: {
			totalMoney() {
				// if (this.isUseCoupon == 0) {
					// this.getBusCouponList()
				// }
				if (this.riderPersionList.length == 0) {
					this.couponList = []
					this.choosedBusCoupon = {}
				}
			},
			originalPrice() {
				this.getBusCouponList()
			}
		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				uni.redirectTo({
					url: 'success.order?id=' + this.orderNo + '&type=rent'
				});
			},
			handleBack() {
				uni.navigateTo({
					url: '../../pagesTravel/rentStationMapBackAddress'
				})
			},
			handleGoBusCouponList() { //跳转到班车优惠券列表
				// if( this.couponList.length != 0){
					// this.$http.get(this.$api.getCommonCouponList + `?type=3&totalPrice=${this.totalMoney}`).then(res => { // 检查有无优惠券
					// 	if (res.code === 200) {
					// 		this.couponList = res.data
					if(this.originalPrice === 0) return
					if (!this.couponList.length) return
					const couponInfo = JSON.stringify({type: 4, totalPrice: this.originalPrice,shopId: -1})
					uni.navigateTo({
						url: '../../pagesTravel/bus.couponList?couponInfo=' + couponInfo
					});
					// 	}
					// })
				// }
			},
			handleChooseDriver() { // 是否需要司机
				this.needDriver = !this.needDriver
			},
			handleChooseInsurance(item, i) { // 选择保险服务
				item.choosed = !item.choosed
				this.$set(this.insuranceList, i, item)
			},
			handleGoInsuranceDetail(item, type) { // 跳转到保险详情
				let obj = {type:1, id:item.id, title: item.name || item.title}
				if (type) {
					obj.type = type
				}
				uni.navigateTo({
					url: '../../pagesTravel/serviceDetail?info=' + JSON.stringify(obj),
				});
			},
			handleChooseBuyDescription() {
				// this.buyDescriptionStatus = !this.buyDescriptionStatus
				this.$http.get(this.$api.orderText, {
					type: 14,
				}).then(res => {
					if (res.code === 200) {
						this.textareaShow = false
						this.noticeInfo = res.data.list[0]
						this.$refs.notice.show()
					}
				})
			},
			// 去选择意向司机
			handleGoDriverList() {
				uni.navigateTo({
					url: '../../pagesTravel/driverList?type=4&curDriverId=' + this.curDriverObj.id
				});
			},
			handleGoBusAddPickuperDetail(item) { // 去修改接送人信息
				uni.navigateTo({
					url: '../../pagesTravel/bus.addPickuper?id='+item.id
				});
			},
			handleDelRider(item) {
				this.riderPersionList.forEach((it_,in_) => {
					if (item.id===it_.id) {
						this.$store.commit('delRiderList',in_)
						this.getRiderList()
					}
				})
			},
			// 此处判断账号中是否有成和历史信息，
			handleGoCarpoolAddRider() { 
				if(this.driverList.length) {
					uni.navigateTo({
						url: '../../pagesTravel/pilotList'
					});
				} else {
					uni.navigateTo({
						url: '../../pagesTravel/addPilot'
					});
				}
			},
			scrollTo(el) {
				uni.createSelectorQuery().select(el).boundingClientRect(data => { //目标节点
					// uni.createSelectorQuery().select(".search-address-list").boundingClientRect((res) => { //最外层盒子节点
						uni.pageScrollTo({
							duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
							scrollTop: data.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
						})
					// }).exec()
				}).exec();
			},
			handleSubmitOrder() { // 提交订单
				const D = this.rentInfo.dateObj.date.value || this.rentInfo.dateObj.date
				const T = (this.rentInfo.dateObj.hour.value || this.rentInfo.dateObj.hour) + ':' + (this.rentInfo.dateObj.minute.value || this.rentInfo.dateObj.minute) + ':00'
				const str = D + ' ' + T
				const countTime = Utils.getCountDownTime(str, 0)
				if (!countTime) {
					return uni.showToast({
						title: '请重新选择出发时间',
						icon: 'none'
					})
				}
			
				const carId = this.carInfo.id // 车辆ID
				const comboId  = this.packageInfo.id || null // 套餐ID
				const { useCarTime, returnTime } = this.updata // 使用时间,还车时间
				const goStationId = this.rentInfo.choosedStation.from && this.rentInfo.choosedStation.from.id || null // 取车点
				const backStationId = this.rentInfo.choosedStation.to && this.rentInfo.choosedStation.to.id || this.rentInfo.choosedStation.from && this.rentInfo.choosedStation.from.id || null // 送车点
				const remark = this.remark // 备注
				const driverId = this.curDriverObj.id || null// 意向司机ID
				const couponId = this.choosedBusCoupon.id || null // 优惠券ID
				const balance = this.usedIntegral || 0 // 	积分
				
				let insuranceIds_arr = []
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						insuranceIds_arr.push(item.id)
					}
				})
				const insuranceIds = insuranceIds_arr.join() || null // 保险IDs
				
				let passengerIds_arr = []
				this.riderPersionList.forEach(item => {
					passengerIds_arr.push(item.id)
				})
				const rentDriverIds = passengerIds_arr.join() || null // 租车驾驶员ids
				if (!this.needDriver && !rentDriverIds) {
					// this.scrollTo('.chengcheren')
					return uni.showToast({title: '请选择驾驶人',icon: 'none'})}
				if (!this.buyDescriptionStatus) {return uni.showToast({title: '请仔细阅读并确认《租车须知》',icon: 'none'})}
				
				const isZusiji = this.needDriver?0:1
				const _this = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
				  tmplIds: ['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'],
				  success (res) { 
					   _this.submitWxNotifyConfirm('p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0',res['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'])
				// #endif
						uni.showLoading({
							title: '提交中...',
							mask: true
						})
					  _this.$http.post(_this.$api.submitRentOrder, {carId, comboId, useCarTime, returnTime, goStationId, backStationId, remark, rentDriverIds, driverId, couponId, balance, insuranceIds, frontTotal:_this.totalMoney, isZusiji,
					isFp: _this.isFp,}).then(res => {
						uni.hideLoading()
					  	if (res.code == 200) {
					  		_this.textareaShow = false
					  		_this.$refs.commonPay.show()
					  		_this.orderNo = res.data.orderNo
					  	}
					  })
					  // #ifdef MP-WEIXIN
				  }
				  })
			  // #endif
				
				
			},
			handleChoosePayType(type) {
				this.curPayType = type
			},
			handleConfirmPay() {
				if (this.curPayType==='balance') { // 余额支付弹窗出支付密码
					this.$refs.keyBoard.show()
				}
			},
			handleShowPriceDetail(s) {
				if (s==='close') {
					this.$refs.priceDetail.close()
					this.textareaShow = true
				} else {
					this.$refs.priceDetail.open()
					this.textareaShow = false
				}
			},
			hancleClosePayTypePopup() {
				this.$refs.payPopup.close()
			},
			handleGoCommonAddRider(item) {
				uni.navigateTo({
					url: '../../pagesTravel/addPilot?id='+ item.id
				});
			},
			// 取消支付
			noPay(){
				uni.reLaunch({
				    // url: '/pagesUser/order/rent.orderList'
					url: '/pagesUser/order/rent.orderDetail?orderStatus=toBePaid&id=' + this.orderNo
				});
			},
			bindPickerChange(e) {
				 this.index = e.target.value
				 this.packageInfo.day = this.dayList[this.index]
			},
			getRiderList() {
				this.riderPersionList = this.$store.getters.getRiderList
			},
			getCurDriverObj() {
				this.curDriverObj = {...this.$store.getters.getChoosedDriverObj}
				if (this.curDriverObj.id) {
					this.needDriver = true
				}
			},
			initList() { // 清空列表
				this.$store.commit('delRiderList')
				this.$store.commit('delChoosedDriverObj')
				this.$store.commit('delChoosedBusCoupon')
			},
			payMoney(pwd) {
				this.$http.post(this.$api.payRentOrder, {
					orderNo: this.orderNo,
					payWord: pwd
				} ).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						// this.$refs.commonPay.closeKeyBoard()
						this.$refs.commonPay.finishCloseKeyBoard()
						this.textareaShow = true
						uni.reLaunch({
							url: 'success.order?id=' + this.orderNo + '&type=rent'
						});
					}else if(res.code == 2012){
						// uni.navigateTo({
						// 	url: '/pagesUser/editPayPwd?type=0'
						// });
					}
				})
			},
			getBusCouponList() { // 获取优惠券列表
				this.$http.get(this.$api.getCommonCouponList + `?type=4&totalPrice=${this.originalPrice}`).then(res => {
					if (res.code === 200) {
						this.couponList = res.data
					}
					if (!res.data.length) {
						this.$store.commit('delChoosedBusCoupon')
						return
					}
					let {
						fullAmount,
						amount
					} = this.choosedBusCoupon
					if (this.choosedBusCoupon.useScene == 1) { // 判断是否属于满减
						if (Number(this.originalPrice) < Number(fullAmount)) {
							this.$store.commit('delChoosedBusCoupon')
						}
					} else if (this.choosedBusCoupon.useScene == 0) {
						if (Number(this.originalPrice) < Number(amount)) {
							this.$store.commit('delChoosedBusCoupon')
						}
					}
				})
			},
			initDayList() {
				for(let i=0; i<60; i++) {
					this.dayList.push(i+1)
				}
			},
			// 获取驾驶员列表
			getDriverList() { 
				this.$http.post(this.$api.getRentDriverList).then(res => {
					if (res.code === 200) {
						this.driverList = res.data
					}
				})
			},
			getInsuranceList() { // 获取保险列表
				this.$http.get(this.$api.getRentInsuranceList,{carId: this.carInfo.id,shopId:this.carInfo.shopId}).then(res => {
					if (res.code === 200) {
						this.insuranceList = res.data.insurance
						this.insuranceList.map(item => {
							item.choosed = true
						})
						this.noticeList = res.data.textDescription
						this.integral = res.data.jifen
						this.exchangeRate = res.data.rate
						this.cashPledge = res.data.cashPledge
					}
				})
			},
			//去富文本页面
			goToFWb(type,name) {
				uni.navigateTo({
					url: '/pages/others/depositRule?type=' + type + '&name='+ name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.page {
	padding-top: 460rpx;
	/deep/.input-placeholder {
		font-size: 30rpx;
		font-weight: normal;
		color: #ccc;
	}
}
.info-wrap {
	// height:342rpx;
	background:#f5f5f5;
	position: fixed;
	/* #ifdef MP-WEIXIN */
	top: 0;
	/* #endif */
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
	left: 0;
	right: 0;
	z-index: 9;
	.top-dack {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		background-color:$blue;
		z-index: -1;
	}
	
	.info {
		position: absolute;
		top: 20rpx;
		left: 0;
		right: 0;
		// height:342rpx;
		background:#fff;
		border-radius:12rpx;
		padding: 40rpx;
		box-sizing: border-box;
		z-index: 9;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		.info_top-wrap {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			.type {
				padding: 0 10rpx;
				background-color: #FFF2E0;
				color: $yellow;
				font-size: 22rpx;
				border-radius: 8rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
			}
			.date-wrap {
				flex: 2;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-weight: bold;
				.duration {
					width:86rpx;
					height:36rpx;
					line-height: 36rpx;
					text-align: center;
					font-size: 22rpx;
					border-radius: 18rpx;
					border: 1px solid #ebebeb;
					color: red;
					// font-weight: normal;
					font-weight: bold;
				}
			}
			.person {
				.person-icon {
					margin-right: 20rpx;
				}
			}
		}
		.info_content-wrap {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: space-between;
			padding-top:20rpx;
			.address-wrap {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: bold;
				position: relative;
				.from,.to {
					display: flex;
					align-items: center;
					.type {
						padding: 0 10rpx;
						background-color: #FFF2E0;
						color: $yellow;
						font-size: 22rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}
				.from {
					margin-bottom: 20rpx;
				}
				.time-wrap {
					padding-left: 44rpx;
					font-size: 30rpx;
					font-weight: normal;
					display: flex;
					align-items: center;
				}
			}
		}
		
		.chartered_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 160rpx;
			border-bottom: 1px solid #ebebeb;
			margin-bottom: 37rpx;
			&:last-child {
				border: none;
			}
			&.un_item {
				background-color: #eaeaea;
				border-bottom: 1px solid #fff;
				&:last-child {
					border: none;
				}
			}
			.img {
				width: 156rpx;
				height: 89rpx;
				background-color: pink;
				margin-right: 36rpx;
			}
			.chartered_info {
				flex: 1;
				.name {
					font-size: 30rpx;
				}
				.detail {
					margin-top: 17rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price {
						font-size: 24rpx;
						color: $red;
						font-weight: bold;
					}
					.passenger_num {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			.edit-icon {
				padding-left: 80rpx;
			}
		}
	}
	
}

.common-wrap {
	border-radius: 12rpx;
	background-color: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	.input-wrap {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebebeb;
		font-size: 30rpx;
		&:last-child {
			border: none;
		}
		&.remark {
			height: 200rpx;
			align-items: flex-start;
			padding: 30rpx 0;
			box-sizing: border-box;
			.textarea {
				flex: 1;
				height: 160rpx;
			}
		}
		.l-wrap {
			display: flex;
			align-items: center;
			.icon {
				display: inline-block;
				height: 30rpx;
				width: 30rpx;
				margin-right: 20rpx;
			}
			.terms {
				color: $blue;
			}
		}
		.pirce {
			color: $red;
			padding-right: 10rpx;
		}
		.ul_service {
			display: flex;
			.li_service {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				margin-left: 80rpx;
				.txt {
					margin-left: 20rpx;
				}
			}
		}
		.type {
			font-size: 30rpx;
		}
		.input {
			flex: 1;
			text-align: right;
			font-size: 30rpx;
			display: flex;
			input {
				padding-right: 6rpx;
			}
		}
	}
}

.content-wrap {
	margin-top: 20rpx;
	.rider_info-wrap {
		width:690rpx;
		background:#fff;
		border-radius:12rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		.rider_list {
			margin-bottom: 40rpx;
			.rider_item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #ebebeb;
				.l-wrap {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					.name {
						font-size: 30rpx;
						padding: 0 10rpx 0 20rpx;
						width: 120rpx;
					}
					.type {
						padding-right: 40rpx;
					}
				}
			}
		}
		
		.common-btn {
			width: 520rpx;
			
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			.common-btn-con {
				display: flex;
				align-items: center;
				.txt {
					margin-left: 20rpx;
				}
			}
		}
	}
}

.buy_description {
	position: relative;
	font-size: 28rpx;
	padding: 30rpx 0 147rpx 50rpx;
	box-sizing: border-box;
	line-height: 50rpx;
	.icon {
		display: inline-block;
		height: 30rpx;
		width: 30rpx;
		margin-right: 20rpx;
		position: absolute;
		top: 36rpx;
		left: 0;
	}
	.terms {
		color: $blue;
	}
}

.popup-wrap {
	.popop_content {
		background-color: #fff;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		padding: 20rpx 30rpx 98rpx;
		.ul {
			.li {
				height: 98rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EBEBEB;
				font-size: 26rpx;
				&:last-child {
					border: none;
				}
				.r-wrap {
					.price {
						margin-right: 50rpx;
					}
					.num {
						margin-right: 30rpx;
					}
				}
			}
		}
	}
	.submit-btn {
		border-top: 1px solid #EBEBEB;
	}
}

.submit-btn {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background-color: #fff;
	height: 98rpx;
	font-size: 26rpx;
	color: #666;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	.price-wrap {
		flex: 1;
		display: flex;
		align-items: center;
		.price {
			color: $red;
			font-size: 36rpx;
			margin-left: 24rpx;
		}
	}
	.r-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.detail-btn {
			display: flex;
			align-items: center;
		}
		.arrow-icon {
			margin: 0 40rpx 0 16rpx;
		}
		.btn {
			width:240rpx;
			height:72rpx;
			line-height: 72rpx;
			background:$yellow;
			border-radius:12rpx;
			color:#fff;
			text-align: center;
			font-size: 32rpx;
		}
	}
}

.common-btn {
	box-shadow: none;
}


</style>
